<template>
  <div>
    <table>
      <tr>
        <td>序号</td>
        <td>手机号</td>
        <td v-for="app in apps" :key="app.name">{{ app.name }}</td>
        <td>总数</td>
      </tr>
      <tr v-for="(mobile, mobileIndex) in mobiles" :key="mobile.mobile">
        <td>
          {{ mobiles.length - mobileIndex }}
        </td>
        <td>{{ mobile.mobile }}</td>
        <td v-for="app in apps" :key="app.name">
          <div>
            <input type="text" v-model="mobile[app.name]" />
          </div>
          <div>
            {{ ((mobile[app.name] || 0) / (app.rate || 1)).toFixed(2) }}
          </div>
        </td>
        <td>
          {{ mobile.total }}
        </td>
      </tr>
    </table>
    <div>
      <button @click="save">save</button>
      <button @click="log">log</button>
    </div>
  </div>
</template>

<script>
import { ref, watch } from "vue";
import timeStamp from "time-stamp";
import { http } from "../../api/fetch";
const day = timeStamp("YYYY-MM-DD");
export default {
  setup() {
    let apps = ref([]);
    let mobiles = ref([]);

    watch(
      mobiles,
      function (newValue) {
        if (Array.isArray(newValue)) {
          newValue.forEach((item) => {
            if (Array.isArray(apps.value)) {
              item.total = apps.value
                .reduce(function (pre, cur) {
                  return pre + (item[cur.name] || 0) / (cur.rate || 1);
                }, 0)
                .toFixed(2);
            }
          });
        }
      },
      {
        deep: true,
      }
    );
    return {
      apps,
      mobiles,
    };
  },
  methods: {
    log() {
      console.log(this.mobiles);
    },
    async save() {
      await http.post("/api/dayMoney/save", {
        day,
        mobiles: this.mobiles,
      });
    },
    async getData() {
      const moneyRes = await http.get("/api/dayMoney/get", {
        data: { day },
      });
      if (moneyRes.data) {
        const data = moneyRes.data.find(function (item) {
          return item.day == day;
        }) || { day, mobiles: [] };
        data.mobiles.forEach((item) => {
          this.mobiles = this.mobiles.map((mobile) => {
            if (mobile.mobile === item.mobile) {
              return {
                ...mobile,
                ...item,
              };
            } else {
              return {
                ...mobile,
              };
            }
          });
        });
      }
    },
  },
  async mounted() {
    try {
      const appRes = await http.get("/api/app/get");
      this.apps = appRes.data || [];
      const mobileRes = await http.get("/api/phone/get");
      this.mobiles = mobileRes.data || [];
      await this.getData();
    } catch (e) {
      console.log(e);
    }
  },
};
</script>

<style lang="less">
table {
  td {
    border: 1px solid #ddd;
    padding: 8px 10px;
    text-align: center;
    input {
      width: 50px;
      padding: 2px 6px;
      border: 1px solid #ccc;
      outline: none;
      height: 32px;
      line-height: 32px;
    }
  }
}
</style>
